<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element UI Notification 实现</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding: 20px;
        }

        /* 按钮样式 */
        button {
            padding: 8px 16px;
            background: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }

        button:hover {
            background: #66b1ff;
        }

        /* 通知容器样式 - 固定在右上角 */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }

        /* 单个通知的样式 */
        .notification {
            width: 330px;
            padding: 14px 26px 14px 13px;
            border-radius: 8px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            overflow: hidden;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            position: relative;
        }

        /* 通知图标 */
        .notification__icon {
            margin-right: 13px;
            font-size: 24px;
            width: 24px;
            height: 24px;
        }

        /* 成功图标颜色 */
        .notification__icon--success {
            color: #67c23a;
        }

        /* 警告图标颜色 */
        .notification__icon--warning {
            color: #e6a23c;
        }

        /* 错误图标颜色 */
        .notification__icon--error {
            color: #f56c6c;
        }

        /* 信息图标颜色 */
        .notification__icon--info {
            color: #909399;
        }

        /* 通知内容区域 */
        .notification__content {
            flex: 1;
        }

        /* 通知标题 */
        .notification__title {
            font-weight: 700;
            font-size: 16px;
            color: #303133;
            margin: 0 0 6px 0;
        }

        /* 通知消息 */
        .notification__message {
            font-size: 14px;
            line-height: 21px;
            margin: 0;
            color: #606266;
            text-align: justify;
        }

        /* 关闭按钮 */
        .notification__closeBtn {
            position: absolute;
            top: 18px;
            right: 15px;
            cursor: pointer;
            color: #909399;
            font-size: 16px;
        }

        .notification__closeBtn:hover {
            color: #606266;
        }

        /* 入场动画 */
        .notification-fade-enter {
            transform: translateX(100%);
            opacity: 0;
        }

        .notification-fade-enter-active {
            animation: notification-fade-in .3s;
        }

        /* 退场动画 */
        .notification-fade-leave-active {
            animation: notification-fade-out .3s;
        }

        /* 入场动画定义 */
        @keyframes notification-fade-in {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* 退场动画定义 - 修复后的版本 */
        @keyframes notification-fade-out {
            0% {
                transform: translateY(0);
                opacity: 1;
                margin-bottom: 16px;
                height: auto;
            }
            100% {
                transform: translateY(-100%);
                opacity: 0;
                margin-bottom: 0;
                height: 0;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    </style>
</head>
<body>
<h1>Element UI Notification 实现</h1>

<button id="btn-success">成功通知</button>
<button id="btn-warning">警告通知</button>
<button id="btn-error">错误通知</button>
<button id="btn-info">信息通知</button>
<button id="btn-multiple">连续多条通知</button>

<!-- 通知将动态添加到这个容器中 -->
<div class="notification-container" id="notification-container"></div>

<script>
    // 通知类型配置
    const notificationTypes = {
        success: {
            icon: '✓',
            className: 'notification__icon--success'
        },
        warning: {
            icon: '!',
            className: 'notification__icon--warning'
        },
        error: {
            icon: '×',
            className: 'notification__icon--error'
        },
        info: {
            icon: 'i',
            className: 'notification__icon--info'
        }
    };

    // 显示通知函数
    function showNotification(options) {
        // 默认配置
        const defaults = {
            title: '',
            message: '',
            type: 'info',
            duration: 4500,
            onClose: null
        };

        // 合并配置
        options = {...defaults, ...options};

        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = 'notification notification-fade-enter';

        // 获取类型配置
        const typeConfig = notificationTypes[options.type] || notificationTypes.info;

        // 构建通知HTML
        notification.innerHTML = `
                <div class="notification__icon ${typeConfig.className}">${typeConfig.icon}</div>
                <div class="notification__content">
                    <h2 class="notification__title">${options.title}</h2>
                    <p class="notification__message">${options.message}</p>
                </div>
                <span class="notification__closeBtn">×</span>
            `;

        // 添加到容器
        const container = document.getElementById('notification-container');
        container.appendChild(notification);

        // 强制重绘，确保动画能触发
        void notification.offsetHeight;

        // 添加入场动画
        notification.classList.remove('notification-fade-enter');
        notification.classList.add('notification-fade-enter-active');

        // 设置关闭事件
        const closeBtn = notification.querySelector('.notification__closeBtn');
        let timer;

        const closeNotification = () => {
            // 如果已经在关闭中，则不再处理
            if (notification.classList.contains('notification-fade-leave-active')) {
                return;
            }

            // 添加退场动画类
            notification.classList.add('notification-fade-leave-active');

            // 动画结束后移除元素
            setTimeout(() => {
                container.removeChild(notification);
                if (options.onClose) {
                    options.onClose();
                }
            }, 300);
        };

        // 点击关闭按钮
        closeBtn.addEventListener('click', closeNotification);

        // 自动关闭
        if (options.duration > 0) {
            timer = setTimeout(closeNotification, options.duration);
        }

        // 鼠标移入暂停计时器
        notification.addEventListener('mouseenter', () => {
            if (timer) {
                clearTimeout(timer);
            }
        });

        // 鼠标移出恢复计时器
        notification.addEventListener('mouseleave', () => {
            if (options.duration > 0) {
                timer = setTimeout(closeNotification, options.duration);
            }
        });

        // 返回关闭函数
        return closeNotification;
    }

    // 绑定按钮事件
    document.getElementById('btn-success').addEventListener('click', () => {
        showNotification({
            title: '成功',
            message: '这是一条成功的通知消息',
            type: 'success'
        });
    });

    document.getElementById('btn-warning').addEventListener('click', () => {
        showNotification({
            title: '警告',
            message: '这是一条警告的通知消息',
            type: 'warning'
        });
    });

    document.getElementById('btn-error').addEventListener('click', () => {
        showNotification({
            title: '错误',
            message: '这是一条错误的通知消息',
            type: 'error'
        });
    });

    document.getElementById('btn-info').addEventListener('click', () => {
        showNotification({
            title: '信息',
            message: '这是一条信息的通知消息',
            type: 'info'
        });
    });

    document.getElementById('btn-multiple').addEventListener('click', () => {
        showNotification({
            title: '第一条通知',
            message: '这是第一条通知消息',
            type: 'success'
        });

        setTimeout(() => {
            showNotification({
                title: '第二条通知',
                message: '这是第二条通知消息',
                type: 'warning'
            });
        }, 300);

        setTimeout(() => {
            showNotification({
                title: '第三条通知',
                message: '这是第三条通知消息',
                type: 'error'
            });
        }, 600);
    });
</script>
</body>
</html>